<template>
  <div>
    <div class="params">
      <el-row>
        <label>页面URI:</label>
        <el-select style="width:160px" v-model="param.pageUri" @change="loadData">
          <el-option v-for="item in pageUris " :key="item.value" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="el-icon-search" @click="jump(1)">搜索</el-button>
        <el-button type="primary" class="el-icon-sort" @click="sync()">同步</el-button>
        <el-button type="primary" class="el-icon-plus" @click="openAdd()">添加</el-button>

        <!-- <el-upload
          :show-file-list="false"
          action="/adminjson/uploadApk.json"
          :on-success="fileSuccess"
          :on-error="fileFail"
          :before-upload="openLoad"
          accept=".apk">
          <el-button size="small" type="primary">上传安卓包</el-button>
        </el-upload> -->
        <div style="margin-top:14px;">
          <el-form style="display:inline-block; width:200px;">
            <el-form-item>
              <el-input v-model="fileName" placeholder="安卓包文件名,空为随机命名"></el-input>
            </el-form-item>
          </el-form>
          <lazy-img-upload @onSuccess="fileSuccess"
            beforeClass="uploadApk"
            afterClass="uploadApk"
            quality="50"
            maxSize="30mb"
            :fileName="fileName"
            resize-width="1000">
          </lazy-img-upload>
          <el-button class="uploadBtn" size="small" type="primary">上传安卓包</el-button>
        </div>
      </el-row>

    </div>
    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%">
      <el-table-column prop="constantId" label="ID"></el-table-column>
      <el-table-column prop="pageUri" label="页面URI"></el-table-column>
      <el-table-column prop="fieldTitle" label="常量作用"></el-table-column>
      <el-table-column prop="fieldValue" label="常量值"></el-table-column>
      <el-table-column prop="fieldName" label="常量名"></el-table-column>
      <el-table-column prop="nick" label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteIt(scope.row.constantId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total,prev, pager, next"
      @current-change="jump"
      :pageSize=15
      :total="total">
    </el-pagination>
    <el-dialog title="添加" :modal-append-to-body="false" :visible.sync="addDialog">
      <el-form>
        <el-form-item label="页面URI:">
          <el-input v-model="addDialogParam.pageUri"></el-input>
        </el-form-item>
        <el-form-item label="常量作用:">
          <el-input v-model="addDialogParam.fieldTitle"></el-input>
        </el-form-item>
        <el-form-item label="常量名:">
          <el-input v-model="addDialogParam.fieldName"></el-input>
        </el-form-item>
        <el-form-item label="常量值:">
          <el-input v-model="addDialogParam.fieldValue"　 type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改" :modal-append-to-body="false" :visible.sync="editDialog">
      <el-form>
        <el-form-item label="页面URI:">
          <el-input v-model="editDialogParam.pageUri"></el-input>
        </el-form-item>
        <el-form-item label="常量作用:">
          <el-input v-model="editDialogParam.fieldTitle"></el-input>
        </el-form-item>
        <el-form-item label="常量名:">
          <el-input v-model="editDialogParam.fieldName"></el-input>
        </el-form-item>
        <el-form-item label="常量值:">
          <el-input v-model="editDialogParam.fieldValue"
                    type="textarea"
                    >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ajax,
    myconstants,
    delConstants,
    addConstants,
    modifyConstants,
    synConstants,
    uploadApk
  } from "../../data/service";
  import LazyImgUpload from "../../components/LazyImgUpload"

  export default {
    name: "constantList",
    components:{
      LazyImgUpload
    },
    data() {
      return {
        pageUris: [
          {
            label: "iOS审核",
            value: "iOSTEST"
          },
          {
            label: "Android",
            value: "Android"
          },
          {
            label: "iOS",
            value: "iOS"
          },
          {
            label: "版本设置",
            value: "version"
          },
          {
            label: "vip基本设置",
            value: "vip"
          },
          {
            label: "其他系统常量",
            value: "system"
          }
        ],
        param: {
          pageUri: 'version'
        },
        tableData: [],
        total: 0,
        page: 1,
        addDialog: false,
        addDialogParam: {
          pageUri: '',
          fieldTitle: '',
          fieldName: '',
          fieldValue: ''
        },
        editDialog: false,
        editDialogParam: {
          constantId: '',
          pageUri: '',
          fieldTitle: '',
          fieldName: '',
          fieldValue: ''
        },
        uploadAction:'',
        fileName: ''
      }
    },
    created() {
      this.uploadAction = this.uploadApk;
      this.jump(1);
    },
    mixins: [ajax],
    methods: {
      jump(page) {
        this.page = page;
        this.loadData();
      },
      loadData() {
        this.doajax(myconstants, {"page": this.page, "pageUri": this.param.pageUri}, (resp) => {
          this.tableData = resp.data;
          this.total = resp.total;
        })
      },
      deleteIt(id) {
        this.doajax(delConstants, {"constantId": id}, (resp) => {
          this.success("删除成功");
          this.loadData();
        })
      },
      openAdd() {
        this.addDialog = true;
        this.addDialogParam = {
          pageUri: '',
          fieldTitle: '',
          fieldName: '',
          fieldValue: ''
        };
      },
      submitAdd() {
        this.doajax(addConstants, this.addDialogParam, (resp) => {
          this.success("添加成功");
          this.loadData();
          this.addDialog = false;
        })
      },
      edit(row) {
        this.editDialog = true;
        this.editDialogParam = row;
      },
      submitEdit() {
        this.doajax(modifyConstants, this.editDialogParam, (resp) => {
          this.success("修改成功");
          this.loadData();
          this.editDialog = false;
        });
      },
      sync() {
        this.doajax(synConstants, {}, (resp) => {
          this.success("操作成功");
        })
      },
      fileSuccess(src){
        // this.closeLoading();
        this.success("文件上传成功");
        this.doajax(uploadApk, {url: src}, res => {
          this.loadData();
        })
      },
      fileFail(){
        // this.closeLoading();
        this.success("文件上传失败");
      },
      openLoad(){
        this.openLoading();
      }

    }
  }
</script>

<style scoped>
 .uploadApk {
    display: inline-block;
    padding-right: 20px;
    z-index: 2;
  }

  .uploadApk >>> img {
    width: 92px!important;
    height: 32px!important;
  }



  .uploadBtn{position: relative; margin-left: -116px; z-index:1;}
</style>
